<template>
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="12"><i class="el-icon-arrow-left" @click="$router.back(-1)"></i></el-col>
                <el-col :span="8"><span class="name-title">{{cooperative.name}}</span></el-col>
                <el-col :span="4">
                    <i class="el-icon-edit" @click="handleEdit"></i>
                    <i class="el-icon-delete" @click="handleDelete"></i>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="300px" class="user-header-bg">
                <img src="@/assets/org.jpg"
                     style="width: 150px;height: 150px"></el-aside>
            <el-main class="user-info-bg">
                <el-row>
                    <el-col :span="8">统一社会信用编码：{{cooperative.creditCode?cooperative.creditCode:'暂无'}}</el-col>
                    <el-col :span="8">所属小组：{{cooperative.parentName?cooperative.parentName:'暂无'}}</el-col>
                    <el-col :span="8">联系电话：{{cooperative.phone?cooperative.phone:'暂无'}}</el-col>
                </el-row>
                <el-row class="user-row">
                    <el-col :span="8">注册号：{{cooperative.registerNo}}</el-col>
                    <el-col :span="8">注册地址：{{cooperative.registerAddress}}</el-col>
                    <el-col :span="8">注册资金：{{cooperative.registerCapital}}万元</el-col>
                </el-row>
                <el-row class="user-row">
                    <el-col :span="8">成立日期：{{cooperative.establishmentDate}}</el-col>
                    <el-col :span="8">有效期：{{cooperative.validDate?cooperative.validDate:'暂无'}}</el-col>
                    <el-col :span="8">等级：{{cooperative.rank?cooperative.rank.name:'暂无'}}</el-col>
                </el-row>
                <el-row class="user-row">
                    <el-col :span="8">法人姓名：{{cooperative.legalPersonName?cooperative.legalPersonName:'暂无'}}</el-col>
                    <el-col :span="8">法人身份证号：{{cooperative.legalPersonID?cooperative.legalPersonID:'暂无'}}</el-col>
                    <el-col :span="8">
                        法人联系电话：{{cooperative.legalPersonPhone?cooperative.legalPersonPhone:'暂无'}}
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
        <!--农户列表-->
        <el-container>
            <el-header class="header-bg">
                <div class="header-title">农户列表</div>
            </el-header>
            <div class="ground-bg">
                <Farmer :cooperativeId="id"></Farmer>
            </div>
        </el-container>
        <AddAndEdit
                v-model="addAndEditValue"
                @on-show-change="addAndEditDone"
        />
    </el-container>
</template>
<script>
    import Farmer from "@/views/platform/user/farmer/index";
    import AddAndEdit from "./AddAndEdit";

    export default {
        components: {
            Farmer: Farmer,
            AddAndEdit: AddAndEdit
        },
        data() {
            return {
                id: 0,
                cooperative: {},
                addAndEditValue: {
                    show: false,
                    cooperative: {id: 0}
                }
            }
        },
        mounted() {
            this.id = Number(this.$route.query.id);
            this.loadCooperative(this.id);
        },
        methods: {
            loadCooperative(id) {
                this.$api.cooperative.detail(id, result => {
                    this.cooperative = result.cooperative;
                })
            },
            addAndEditDone(data) {
                this.addAndEditValue.show = data.visible;
                this.loadCooperative(this.id);
            },
            handleEdit() {
                this.addAndEditValue = {show: true, cooperative: this.cooperative};
            },
            handleDelete() {
                this.$confirm("此操作将删除该合作社, 是否继续?", "删除提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.$api.cooperative.delete(this.id, () => {
                        this.$message({
                            type: "success",
                            message: "删除合作社成功"
                        });
                        this.$router.push({path: "/cooperative"})
                    });
                });
            },
        }
    }
</script>
<style scoped>
    .user-row {
        margin-top: 10px
    }

    .ground-bg {
        width: 100%;
        margin-top: 50px;
    }

    .el-icon-edit {
        margin-left: 50px;
        font-size: 20px;
        color: dodgerblue;
        cursor: pointer;
    }

    .name-title {
        font-size: 20px;
        font-weight: bold
    }

    .el-icon-delete {
        font-size: 20px;
        color: red;
        margin-left: 30px;
        cursor: pointer;
    }

    .user-header-bg {
        margin-top: 15px;
        margin-left: 5%
    }

    .user-info-bg {
        font-size: 14px;
        color: #545c64
    }
    .header-bg{
        height:40px !important;margin-top: 50px;background-color:#409EFF
    }
    .header-title{
        line-height: 40px;color: white
    }
</style>